<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 余额统计 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-row :gutter="20">
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-select v-model="query.type" placeholder="--消费类型--" clearable filterable>
                                <el-option
                                    v-for="item in typeoptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-input
                                v-model="query.billNumber"
                                placeholder="订单号查询"
                                class="handle-input mr10"
                                @keyup.enter.native="handleSearch"
                            ></el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-date-picker
                                type="date"
                                placeholder="下单时间"
                                v-model="query.beginTime"
                                style="width: 100%"
                            ></el-date-picker>
                        </div>
                    </el-col>
                    <el-col style="padding: 0px; display: inline; width: 1%; line-height: 1.5">—</el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple">
                            <el-date-picker type="date" placeholder="下单时间" v-model="query.endTime" style="width: 100%"></el-date-picker>
                        </div>
                    </el-col>

                    <el-col :span="2">
                        <div class="grid-content bg-purple">
                            <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <el-tabs type="border-card">
                <el-tab-pane label="会员余额统计">
                    <el-table
                        v-loading="loading"
                        :data="tableData"
                        border
                        class="table"
                        ref="multipleTable"
                        header-cell-class-name="table-header"
                        row-key="id"
                    >
                        <el-table-column width="180" prop="CreationTime" label="消费时间"></el-table-column>
                        <el-table-column width="180" prop="BillNumber" label="订单号"></el-table-column>
                        <el-table-column prop="Way" :formatter="typeFilter" label="消费类型" align="center"></el-table-column>
                        <el-table-column prop="Type" label="操作" align="center"></el-table-column>

                        <el-table-column width="200" prop="value" label="余额" align="center"></el-table-column>
                        <el-table-column width="200" prop="Balance" label="可用余额" align="center"></el-table-column>
                        <el-table-column width="200" prop="Name" label="消费门店" align="center"></el-table-column>
                        <el-table-column prop="CardID" label="卡号"></el-table-column>
                        <el-table-column prop="WeChatName" label="微信名称"></el-table-column>
                    </el-table>
                    <div class="pagination">
                        <el-pagination
                            @size-change="handleSizeChange"
                            background
                            @current-change="handleCurrentChange"
                            :current-page="1"
                            :page-sizes="[10, 15, 20, 30]"
                            :page-size="10"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageTotal"
                        >
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="图表统计分析">
                    <Chart ref="charts" :id="id" :option="option"></Chart>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import Chart from '@/components/common/chart.vue';
export default {
    // name: 'user_list',
    data() {
        return {
            typeoptions: [
                {
                    value: -1,
                    label: '--消费类型--'
                },
                {
                    value: 0,
                    label: '商品订单'
                },
                {
                    value: 1,
                    label: '拼团订单'
                },
                {
                    value: 2,
                    label: '限时抢购'
                },
                {
                    value: 3,
                    label: '礼品兑换'
                },
                {
                    value: 4,
                    label: '快速消费'
                },
                {
                    value: 5,
                    label: '商品消费'
                },
                {
                    value: 6,
                    label: '会员充值'
                },
                {
                    value: 7,
                    label: '余额充值'
                }
            ],

            query: {
                billNumber: '',
                type: -1,
                beginTime: '',
                endTime: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData: [],
            loading: false,
            pageTotal: 0,
            //----------------图表--------------------
            id: 'consume',
            option: {
                chart: {
                    type: 'line'
                },
                title: {
                    text: '会员余额统计'
                },
                subtitle: {
                    text: ''
                },
                xAxis: {
                    categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
                },
                yAxis: {
                    title: {
                        text: ''
                    }
                },
                credits: {
                    enabled: false // 禁用版权信息
                },
                tooltip: {
                    valueSuffix: '',
                    style: { color: 'black', fontSize: '16px' },
                    shadow: false
                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            // 开启数据标签
                            enabled: true
                        },
                        // 关闭鼠标跟踪，对应的提示框、点击事件会失效
                        enableMouseTracking: true
                    }
                },
                series: [
                    {
                        name: '流入',
                        data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
                    },
                    {
                        name: '流出',
                        data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
                    }
                ]
            }
        };
    },
    components: {
        Chart
    },
    created() {
        this.getData();
        this.getTotalData();
    },
    methods: {
        // 触发搜索按钮
        handleSearch() {
            this.query.pageIndex = 1;
            this.getData();
            this.getTotalData();
        },
        typeFilter(row, column, cellValue, index) {
            var array = this.typeoptions;
            return array.filter((item) => {
                return item.value == row.Way;
            })[0].label;
        },
        getData() {
            this.loading = true;
            var parmas = {
                type: this.query.type || -1,
                orderNumber: this.query.billNumber,
                beginTime: this.query.beginTime,
                endTime: this.query.endTime,
                pageIndex: this.query.pageIndex,
                pageSize: this.query.pageSize
            };
            axios({
                url: config.gatewayUrl + '/statistics/memberbalance/getPage',
                method: 'post',
                data: parmas,
                headers: {
                    // 'Content-Type': 'multipart/form-data'
                }
            }).then((res) => {
                this.pageTotal = res.data.total;
                this.tableData = JSON.parse(res.data.list);
                this.loading = false;
            });
        },
        getTotalData() {
            this.loading = true;
            var parmas = {
                type: this.query.type || -1,
                orderNumber: this.query.billNumber,
                beginTime: this.query.beginTime,
                endTime: this.query.endTime,
                pageIndex: this.query.pageIndex,
                pageSize: this.query.pageSize
            };
            axios({
                url: config.gatewayUrl + '/statistics/memberbalance/getchartdata',
                method: 'post',
                data: parmas
            }).then((res) => {
                if (res.data.length > 0) {
                    var category = res.data[0].split(',');
                    var addArray = [];
                    var temAdd = res.data[1].split(',');
                    var redArray = [];
                    var temRed = res.data[2].split(',');

                    for (let i = 0; i < temAdd.length; i++) addArray.push(parseFloat(temAdd[i]));

                    for (let i = 0; i < temRed.length; i++) redArray.push(parseFloat(temRed[i]));

                    this.option.xAxis.categories = category;
                    this.option.series[0].data = addArray;
                    this.option.series[1].data = redArray;

                    this.$refs.charts.SetChart();
                }
            });
        },
        //消费记录分页导航
        handlePageChange(val) {
            //跳转到
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            //改变页码
            this.query.pageSize = val;
            this.getData();
        },
        handleCurrentChange(val) {
            //下一页console.log(`当前页: ${val}`);
            this.query.pageIndex = val;
            this.getData();
        }
    },
    watch: {}
};
</script>